<!DOCTYPE html>
<!-- 讲座详情页面 -->
<!-- author: 豆豆 -->
<!-- 2020/6/30 -->
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
		<script src="../../Common/js/lib/jquery-3.4.1.min.js"></script>
		<script src="../../Common/js/lib/materialize.min.js"></script>
		<script src="../../Common/js/tools.js"></script>
		<script src="../../Common/js/jump.js"></script>
		<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
		<link rel="stylesheet" href="../../Common/css/lib/materialize.min.css">
		<link rel="stylesheet" href="../../Common/css/ufun.css" />
		<link rel="stylesheet" href="../../Common/css/summernote-fix.css" />
		<link rel="stylesheet" href="../../Common/css/detail-page.css" />
		<style type="text/css">
			.lecture-head {
				background-color: var(--color-white);
				padding: 5vw;
			}

			#LectureCover {
				width: 20vw; /* 4:5 */
				height: 25vw; /* 4:5 */
				border-radius: 2vw;
				margin-right: 4vw;
				flex-shrink: 0;
				background-color: var(--color-gray-dark);
			}

			#LectureCover img {
				width: 100%;
				height: 100%;
				border-radius: 2vw;
			}

			#LectureTitle {
				position: relative;
				display: flex;
				font-weight: 700;
				font-size: 5.5vw;
				margin: 0vw 0vw 1vw 0vw;
			}

			.lecture-head-info {
				display: flex;
				align-items: flex-start;
				position: relative;
			}


			#SchoolName {
				font-style: italic;
			}

			.lecture-info {
				text-align: left;
				margin-top: 2vw;
				margin-bottom: 2vw;
				display: flex;
				font-size: 4vw;
				align-items: center;
				font-weight: 400;
			}

			#InfoDivider {
				width: 1vw;
				height: 1vw;
				background: var(--color-gray-dark);
				-moz-border-radius: 20vw;
				-webkit-border-radius: 20vw;
				border-radius: 20vw;
				margin: 2vw;
			}

			#Recommend {
				color: var(--color-yellow);
			}

			#RecommendNum {
				color: var(--color-yellow);
			}

			#View,
			#ViewNum {
				color: var(--color-gray-medium);
			}

			.time-and-price {
				display: flex;
				font-size: 3vw;
				position: relative;
				align-items: center;
				justify-content: space-between;
				margin-top: 2vw;
			}

			.read-time-info {
				display: flex;
				font-weight: 300;
				color: var(--color-gray-medium);
				align-items: center;
			}

			.lecture-price-container {
				display: flex;
				text-align: center;
				align-items: center;
				justify-content: center;
				width: 13vw;
				height: 6vw;
				background: var(--color-yellow);
				border-radius: 2vw;
			}

			#PriceContainer {
				height: inherit;
				display: flex;
				align-items: center;
			}

			#Price {
				color: var(--color-gray-dark);
				font-weight: 600;
				font-size: 3.5vw;
			}

			#PriceUnit {
				color: var(--color-gray-dark);
				font-weight: 600;
				font-size: 3.5vw;
			}

			/* 这部分是讲座介绍中间这部分的CSS */
			.lecture-intro {
				width: 100%;
				background-color: var(--color-white);
				padding: 5vw;
				margin: 2vw auto 0;
			}

			#DescriptionTitle,
			#InstructorTitle,
			.lecture-content {
				font-size: 4vw;
				font-weight: 500;
			}

			#DescriptionContent {
				color: var(--color-gray-medium);
				font-size: 4vw;
				font-weight: 400;
				margin: 2vw 2vw;
			}

			.instructor-info-container {
				align-items: center;
				display: flex;
				justify-content: space-between;
			}


			#InstructorProfilePic {
				width: 12vw;
				height: 12vw;
				background: var(--color-gray-dark);
				-moz-border-radius: 20vw;
				-webkit-border-radius: 20vw;
				border-radius: 20vw;
				margin: 2vw 0vw;
				display: flex;
				float: left;
			}

			#InstructorName {
				font-size: 4vw;
				margin-left: 3vw;
				position: relative;
				display: flex;
			}

			.subscript-container {
				width: 14vw;
				height: 6vw;
				text-align: center;
				align-items: center;
				border-radius: 2vw;
				font-size: 1.5vw;
				display: inline-flex;
				justify-content: center;
			}

			.InstructorPart {
				align-items: center;
				display: inline-flex;
			}

			.subscript-container img {
				width: 14vw;
			}


			.personal-profile {
				color: var(--color-gray-medium);
				font-weight: 400;
				margin: 1vw 1vw;
				font-size: 4vw;
			}

			/* 讲座内容部分 */
			.lecture-content {
				background-color: var(--color-white);
				padding: 5vw;
				margin: 2vw auto;
				width: 100%;
			}

			.content-title {
				font-weight: 500;
			}

			#LecText {
				color: var(--color-gray-medium);
				font-weight: 400;
				margin: 2vw 0vw;
				display: none;
			}

			#HideContent {
				background-color: var(--color-white);
				width: 100%;
				padding: 2vw 4vw;
				margin: 2vw auto;
				display: none;
				justify-content: center;
			}

			#HideContent span {
				display: flex;
				align-items: center;
				justify-content: center;
				color: var(--color-gray-dark);
				font-size: 3.8vw;
				height: 8vw;
				border-bottom: 1px solid var(--color-gray-dark);
			}

			#lecLecerHeadImgLoc {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}

			#Follow {
				display: none;
				height: 6vw;
				padding: 1vw 2.5vw;
				border-radius: 2vw;
				font-size: 3vw;
				text-align: center;
				background-color: var(--color-gray-dark);
				color: var(--color-yellow);
				transition: background-color 0s;
			}

			#Follow.followed {
				color: var(--color-white);
				background-color: var(--color-gray-light);
			}
		</style>
	</head>

	<body>
		<!-- 讲座页面的顶部导航栏 -->
		<header>
			<div id="Left" class="com-btn" onmouseup="ThisBack();">
				<i class="material-icons">keyboard_arrow_left</i>
			</div>
			<div id="Title">讲座详情</div>
			<div id="Right" class="com-btn" onmouseup="showMenu();">
				<i class="material-icons">more_horiz</i>
			</div>
		</header>

		<div class="content">
			<!-- 讲座页面的头部信息 -->
			<div class="lecture-head">
				<div class="lecture-head-info">
					<div id="LectureCover">
						<img src="">
					</div>
					<div id="HeadRightPart">
						<div id="LectureTitle">
							讲座的标题讲座的标题讲座的标题讲座的标题
						</div>

						<div id="SchoolName">
							来自于 山西大学 校圈
						</div>

						<!-- 这部分的数字和后面的字是分开的，直接获取修改数字 -->
						<div class="lecture-info">
							<div id="RecommendNum">322</div>
							<div id="Recommend">&nbsp;推荐</div>
							<div id="InfoDivider"></div>
							<div id="ViewNum">322</div>
							<div id="View">&nbsp;阅读</div>
						</div>
					</div>
				</div>

				<!-- 这部分的数字和后面的字是分开的，直接获取修改数字 -->
				<div class="time-and-price">
					<div class="read-time-info">
						<div>阅读时间约为</div>
						<!-- 下面这个id ReadTime是阅读时间 -->
						<div id="ReadTime">10</div>
						<div id="ReadTimeUnit">分钟</div>
					</div>

					<div class="lecture-price-container">
						<div id="PriceContainer">
							<div id="Price">1</div>
							<div id="PriceUnit">元</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 讲座页面的中间部分，讲座介绍和讲师介绍 -->
			<div class="lecture-intro">
				<div class="lecture-description">
					<div id="DescriptionTitle">讲座介绍</div>
					<div id="DescriptionContent">
						<!--讲座介绍-->
					</div>
				</div>
				<hr>
				<div class="InstructorInfo">
					<div id="InstructorTitle">讲师介绍</div>
					<div class="instructor-info-container">
						<div class="InstructorPart">
							<div id="InstructorProfilePic">
								<img src="" id="lecLecerHeadImgLoc">
							</div>
							<div id="InstructorName">用户名</div>
						</div>

						<div class="subscript-container">
							<div id="Follow" class="button waves-effect" onclick="clickFollow()">
								+ 关注
							</div>
						</div>
					</div>

					<div class="personal-profile">
						用户的个人简介
					</div>
				</div>
			</div>

			<!-- 讲座页面的内容部分，讲座的内容 -->
			<div class="lecture-content">
				<div id="content-title">
					讲座内容
					<!--只是个标题 不要理解错-->
				</div>
				<div class="the-content" id="LecText">
					<!--这里才是讲座内容-->
				</div>
				<!-- 未付费时，显示的“隐藏内容”卡片 -->
				<div id="HideContent">
					<span>讲座内容已被隐藏，请付费查看正文</span>
				</div>
			</div>
		</div>

		<footer id="FooterBox">
			<div id="LikeBtn">
				<img src="./img/like.png" class="like-icon">
				<div>推荐</div>
			</div>
			<div id="PayBtn" class="footer-btn">
				<img src="./img/accept.png">
				<span style>付费阅读正文</span>
			</div>
		</footer>
	</body>
	<script type="text/javascript">
		var userHash;
		var phoneNo;
		var theLec;
		var isLecer;
		var isAccessed;

		function refreshPage() {
			DoWait();
			fetchLecture();
			setTimeout(function() {
				if (IsWaiting) {
					plus.nativeUI.alert("请检查网络连接!", "错误");
					DontWait();
					current.close();
				} else {
					DoShow(current);
				}
			}, 8000);
		}

		document.addEventListener('plusready', function() {
			GetStatusTop();
			userHash = plus.storage.getItem("userHash");
			current = plus.webview.currentWebview();
			lecId = current.lecId;
			refreshPage();
		})

		/**
		 * 从服务器获取问题数据和状态
		 * 根据问题状态填充页面并删减UI元素（主要是按钮）
		 */
		function fetchLecture() {
			DoWait();
			// 获取问题数据以及状态
			CallAJAX("getLec", {
					"userHash": userHash,
					"lecId": lecId
				},
				function(data) {
					InRefresh = false;
					if (data["res"] != "ok")
						return;
					theLec = data["lec"];
					RefreshUserInfo(function(phoneNo1) {
						phoneNo = phoneNo1;
						showLecCard(theLec);
						checkFollowed();
					});
				}
			);
		}

		/**
		 * 根据返回的数据去填充问题描述的标题、标签、问题描述、悬赏金额、浏览数
		 * @param {*} lec 服务器返回问题数据
		 */
		function showLecCard(lec) {
			checkFollowed();
			isAccessed = (lec["lecAccess"] == "true" || lec["lecCharge"] == 0);
			isLecer = (phoneNo == lec["lecLecerId"]);
			$('#lecLecerHeadImgLoc').attr('src', SERVER_LOC + lec["lecLecerHeadImgLoc"]);
			$('#RecommendNum').text(lec["lecLikedCnt"]);
			$('#ViewNum').text(lec["lecLookedCnt"]);
			$('#InstructorName').text(lec["lecLecerNick"]);
			$('#LectureTitle').text(lec["lecTitle"]);
			if (lec["lecCoverImg"][0] == '/')
				$('#LectureCover>img').attr('src', SERVER_LOC + lec["lecCoverImg"]);
			else
				$('#LectureCover>img').attr('src', lec["lecCoverImg"]);
			$('.personal-profile').html(lec["lecLecerIntro"]);
			$('#DescriptionContent').html(lec["lecIntro"]);

			//判断用户是否可以看到讲座内容
			if (isAccessed || isLecer) {
				$('#LecText').html(lec["lecText"]);
				$('#LecText').css('display', 'flex');
			} else {
				$('#HideContent').css('display', 'flex');
			}

			//当讲座为0元时设置免费
			if (lec["lecCharge"] == 0) {
				lec["lecCharge"] = '免费';
				let oDiv = document.querySelector("#PriceUnit");
				oDiv.parentElement.removeChild(oDiv);
			}
			$('#Price').text(lec["lecCharge"]);

			showBtns();
		}

		function showBtns() {
			ID("LikeBtn").onclick = like;
			ID("PayBtn").onclick = null; //gotoPay;
			// 发布者视角
			if (isLecer) {
				$("footer")[0].style.display = 'none';
			}
			// 观众视角
			else {
				if (isAccessed) {
					$("#LikeBtn")[0].style.display = "inline-flex";
				} else {
					$("#PayBtn")[0].style.display = "inline-flex";
				}
			}
			DoShow(current);
		}

		function like() {
			CallAJAX("likeLec", {
					userHash: userHash,
					lecId: lecId,
				},
				function(data) {
					if (data["res"] != "ok")
						return;
					ID('LikeBtn').classList.add('btn-mute');
					ID('LikeBtn').onclick = null;
				});
		}

		function initRtxt(txtDOM, root) {
			root = root ? root : "../../";
			var imgs = txtDOM.getElementsByTagName('img');
			for (let i = 0; i < imgs.length; ++i) {
				imgs[i].onclick = function() {
					JumpToImgView(imgs[i].src, root);
				}
			}
		}

		function checkFollowed() {
			CallAJAX('checkFollowed', {
				'userHash': userHash,
				'followeeId': phoneNo,
			}, function(data) {
				if (data["res"] == "yes") {
					ID("Follow").classList.add('followed');
					ID("Follow").innerText = "已关注";
					ID("Follow").style.display = 'block';
				} else if (data["res"] == "2") {
					ID("Follow").style.display = 'none';
				} else {
					ID("Follow").classList.remove('followed');
					ID("Follow").innerText = "+ 关注";
					ID("Follow").style.display = 'block';
				}
				DoShow(current);
			});
		}

		function clickFollow() {
			DoFollow(phoneNo, refreshPage);
		}

		function showMenu() {
			JumpToMenu({
				"entityType": 1,
				"entityId": lecId,
				"entityTitle": theLec['lecTitle'],
				"entityContent": theLec['lecIntro'],
				"shareThumbLoc": SERVER_LOC + theLec["lecCoverImg"], // 暂时没用
				"isAuthor": isLecer
			});
		}

		function edit() {
			/*current.append(plus.webview.create(
				'edit.html',
				'QuesEdit', {}, {
					'quesId': quesId,
					'quesTitle': ID('QuesTitle').innerText,
					'quesContent': ID('QuesText').innerHTML,
					'quesReward': reward,
				}
			));*/
			plus.nativeUI.alert('暂不开放讲座编辑功能', null, '不能编辑');
		}

		function remove() {
			CallAJAX("changeQues", {
				"userHash": userHash,
				"quesId": quesId,
				"action": "delete"
			}, function(data) {
				if (data["res"] == "ok") {
					plus.nativeUI.toast('问题删除成功');
					ThisClose();
				} else {
					plus.nativeUI.alert('请检查网络设置', '删除失败');
				}
			}, function() {
				plus.nativeUI.alert('请检查网络设置', '删除失败');
			});
		}
	</script>
</html>
